<template>
  <div class="layout">
    <h2 class="function-header">课程中心</h2>
    <div v-if="tableData.length > 0" class="container">
      <div class="course-list">
        <template v-if="tableData?.length > 0">
          <div class="course-item" v-for="item in tableData" :key="item.id" @click="showDetail(item)">
            <div class="img-box">
              <img v-if="item.scaledUrl" :src="item.scaledUrl" alt="">
              <img v-else :src="item.coverImg" alt="">
            </div>
            <div class="bottom-info">
              <div class="title">{{item.name}}</div>
            </div>
          </div>
          <PaginationView
            :isAffix = "false"
            :total="queryData.total"
            :pageSize="queryData.pageSize"
            :currentPage="queryData.currentPage"
            :allChoose="isAllChooseBtn"
            :pageChoose="isPageChooseBtn"
            :options="batchOptions"
            :checkedNum="checkedNum"
            :canChoose="false"
            @changeSize="handleSizeChange"
            @currentChange="handleCurrentChange"
            @changePageChoose="handlePageChoose"
            @changeAllChoose="handleAllChoose"
            @invertChoose="handleInvertChoose"
            @checkOption="handleBatchOptions"
            @refreshList="getTableData"
            @cancelChoose="handleResetPagination"
          />
        </template>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { courseCenterPagingCourse } from '@/api/course'
import { tableList as mixTable } from "@ruifox-cms/utils";
// import { formatDate } from '@/utils/tools'
import { useRouter } from "vue-router";
import { scaledAndCrop } from '@/api/file'

const router = useRouter();
//跳转课程详情
const showDetail = async (item) => {
  router.push({
    name: 'courseDetail',
    query: {
      id: item.id,
    },
  })
}
//分页器
const {
  queryData,
  tableData,
  // tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: courseCenterPagingCourse,
  // batchFuncApi: deleteByIdsCourse,
});

const defaultForm = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 12,
  name: "",
  type: "PUBLIC",  //课程类型公开
  status: "",  
  // status: "PUBLISHED",  //课程状态 已发布
  needCheck: "",
  approvalStatus: "",
  createdBy: "",
  updatedBy: ""
})
Object.assign(queryData, defaultForm);

//获取课程数据后，裁剪重新获取课程封面图片
const processRateData = async () => {
  tableData.value = await Promise.all(tableData.value.map(async item => {
    try {
      const res = await scaledAndCrop({
        cropHeight: 185,
        cropWidth: 330,
        startX: null,
        startY: null,
        url: item.coverImg,
      });
      return {
        ...item,
        scaledUrl: res.code === 20000 ? res.data : item.coverImg
      };
    } catch (error) {
      return {
        ...item,
        scaledUrl: item.coverImg
      };
    }
  }));
};
onMounted(async () => {
  await getTableData()
  await processRateData();
  console.log("tableData",tableData);
})
</script>

<style lang='scss' scoped>
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.container{
  
  .column-tit001{
    display: flex;
    justify-content: space-between;
  }
  .course-list{
    margin-top: px2rem(40);
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: px2rem(20);
    .course-item{
      width: calc(25% - 0.2rem);
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      transition: all 0.3s;
      border-radius: px2rem(5);
      overflow: hidden;
      .img-box{
        width: 100%;
        position: relative;
        padding-bottom: 56%;
        overflow: hidden;
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transition: all 0.3s;
        }
      }
      .bottom-info{
        padding: px2rem(20);
        .title{
          font-size: px2rem(18);
          color: $black;
          @include textEllipsis(27, 1);
        }
        .description{
          margin-top: px2rem(10);
          font-size: px2rem(16);
          color: #666;
          @include textEllipsis(24, 1);
        }
      }
      &:hover{
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        .img-box img{
          transform: scale(1.1);
        }
        .bottom-info .title{
          color: $mainColor;
        }
      }
    }
    .page-pagination{
      width: 100%;
    }
  }
}
</style>